import React, { useEffect, useState } from 'react';
import { Table } from 'antd';

export default function TableShare() {
  const [scrollHeight, setScrollHeight] = useState(300);
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
    },
    {
      title: '标识',
      dataIndex: 'identification',
    },
    {
      title: '单据编号',
      dataIndex: 'billsNumber',
    },
    {
      title: '单据类型',
      dataIndex: 'leixing',
    },
    {
      title: '业务事由',
      dataIndex: 'shiyou',
    },
    {
      title: '创建时间',
      dataIndex: 'shijian',
    },
  ];

  interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }

  const data:DataType[] = [];

  const listenerTableHeight = () => {
    // 首次进入组件时初始化
    const tableCustom = document.documentElement.getElementsByClassName('ant-table-custom')[0];
    setScrollHeight(tableCustom.clientHeight - 100);
    window.addEventListener('resize', () => {
      setScrollHeight(tableCustom.clientHeight - 100);
    });
  };

  useEffect(() => {
    listenerTableHeight();
  }, []);

  return (
    <div className="ant-table-wrap">
      <div className="ant-table-custom">
        <Table
          scroll={{
            y: scrollHeight,
          }}
          size="small"
          columns={columns}
          dataSource={data}
        />
      </div>
    </div>
  );
}
